<template>
  <div class="square-scarch">
    <el-input
      v-model="taskName"
      placeholder="请输入您想查找的内容"
      class="input-with-select"
      @keyup.enter="handleSearch"
      @blur="handleSearch"
    >
      <template #append>
        <el-button :icon="Search" @click="handleSearch" />
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { Search } from '@element-plus/icons-vue'

const emits = defineEmits(['updateQueryParams'])
const taskName = ref('')

function handleSearch() {
  emits('updateQueryParams', { taskName: taskName.value })
}
</script>

<style lang="less" scoped>
.square-scarch {
  padding: 20px 0;
  border-bottom: 1px solid #eff2f7;
}
</style>
